<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#test{
			width: 100px;
			height: 200px;
			background: aqua;
		}
		#test2{
			width: 200px;
			height: 300px;
			background: fuchsia;
		}
		#test3{
			width: 300px;
			height: 600px;
			background: lime;
		}
		
	</style>
</head>
<body>
	<h1>关键是找对象</h1>
	<div id="test" onclick="ch();">
		<p class="text">总是赢了现在</p>
		<p>把自己输了未来</p>
		<p></p>

	</div>
	<input type="text" name="username" value="paly:" />
	<script type="text/javascript">
	function ch(){
		var test = document.getElementById('test');
		alert(test.id.indexOf('test3'));
		
		if(test.id.indexOf('test') > -1){
			test.id = "test3";
		}
	}
	//按标签找对象
	var hs = document.getElementsByTagName('h1');
	console.log(hs);
	//按表单的名称找对象
	var us = document.getElementsByName('username');
	console.log(us);
	//按类名找对象
	var ua = document.getElementsByClassName('text');
	console.log(ua);
	console.log(test.childNodes);
	console.log(test.childNodes.length);
	console.log(test.children);
	var p3 = document.getElementsByTagName('p')[2];
	console.log(p3);
	console.log(p3.parentNode);
	p3.parentNode.style.background = 'teal';
	p3.parentNode.style.borderBottom = "10px solid maroon";
	obj.style.borderTopStyle
	obj.style.marginLeft
	</script>
</body>
</html>